<template>
  <div class="question">
    <!-- 头部 -->
    <div class="question-header m-center">
      <div class="question-search">
        <img src="https://www.imooc.com/static/img/wenda/wenda-logo.png" alt="">
        <div class="search-box">
          <input type="text" placeholder="请输入你的问题" v-model="questionQuery.title" @keyup.enter="searchQuestion">
          <i class="iconfont" @click="searchQuestion">&#xe63c;</i>
          <span class="reset-btn" @click="resetSearch">重置搜索</span>
        </div>
        <div class="search-btn" @click="AddQuestion">
          提问
        </div>
      </div>
      <div class="question-nav">
        <dl>
          <dt>问答排序：</dt>
          <dd
            v-for="(item, index) in sortList"
            :key="index"
            :class="{
              active: currentSortIndex == index
            }"
            @click="handleSortClick(item.value, index)"
          >
            {{ item.name }}
          </dd>
        </dl>
      </div>
      <div class="question-nav">
        <dl>
          <dt>问答标签：</dt>
          <dd
            v-for="(item, index) in tagList"
            :key="index"
            :class="{
             active: currentTagIndex == index
            }"
            @click="handleTagClick(item.id, index)"
          >
            {{ item.name }}
          </dd>
        </dl>
      </div>
    </div>

    <!-- 列表部分 -->
    <div class="m-center">
      <div class="question-content-container">
        <div class="left">
          <div class="question-list">
            <ul v-if="questionList.length">
              <li v-for="(item, index) in questionList" :key="index" class="question-item">
                <div class="finish-white" v-if="item.status === 0">
                  <span>回答</span>
                  <span>{{ item.reply }}</span>
                </div>

                <div class="finish-green" v-if="item.status === 1">
                  <span class="iconfont" v-if="item.status === 1">&#xe786;</span>
                  <span>{{ item.reply }}</span>
                </div>


                <div class="finish-white" style="color: #999999">
                  <span>浏览</span>
                  <span>{{ item.click }}</span>
                </div>

                <div class="content-box">
                  <h3 class="title" @click="toQuestionDetail(item.questionId)" v-html="item.title"></h3>
                  <p class="tag">
                    <span>标签：</span>
                    <span
                      v-for="(tag, index) in item.tag"
                      :key="index"
                      class="name"
                    >{{ tag }}</span>
                  </p>
                </div>
              </li>
            </ul>
            <p v-else class="list-empty">
              暂无数据
            </p>
          </div>

          <!-- 分页 -->
          <el-pagination
             :current-page="page"
             :page-size="limit"
             :total="total"
             style="padding: 30px 0; text-align: center;"
             layout="total, prev, pager, next, jumper"
             @current-change="fetchData"
          />

        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { getQuestion,getQuestionTag } from '@/api/question'
import {mapGetters} from 'vuex';

export default {
  data () {
    return {
      sortList:[{name: '默认排序',value:'normal'},{name: '热门问答',value:'hot'},{name:'最新问答',value:'new'}],
      currentSortIndex: 0,
      currentTagIndex: 0,
      questionList: [],
      questionQuery:{
        title: '',
        sort:'',
        tag: ''
      },
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 10, // 每页记录数
      tagList:[]
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    // 排序点击
    handleSortClick (item, index) {
      this.currentSortIndex = index
      this.questionQuery.sort = item
      this.fetchData()
    },

    // 标签点击
    handleTagClick(item, index){
      this.currentTagIndex = index
      this.questionQuery.tag = item
      this.fetchData()
    },

    searchQuestion(){
      this.fetchData()
    },

    resetSearch(){
      this.questionQuery.title = ''
      this.questionQuery.sort = ''
      this.questionQuery.tag = ''
      this.currentSortIndex = 0
      this.currentTagIndex = 0
      this.fetchData()
    },

    fetchData(page = 1){
      // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
      // 解决分页无效问题
      this.page = page
      //获取问题列表
      getQuestion(this.page,this.limit,this.questionQuery).then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.total = result.data.total
          this.searchLight(result.data.rows)

          getQuestionTag().then(result => {
            let { code, data } = result
            if (code === 20000) {
              this.tagList = data.item
              this.tagList.unshift({id: '' ,name: '全部'})
              //将标签id转换为名称
              for (let i = 0; i < this.questionList.length; i++){
                this.questionList[i].tag = this.questionList[i].tag.split(',')
                this.questionList[i].tag.forEach(item => {
                  this.tagList.forEach(temp => {
                    if (temp.id === item) {
                      this.questionList[i].tag.push(temp.name)
                    }
                  })
                })
                if (this.questionList[i].tag.length == 2) this.questionList[i].tag.splice(0,1)
                if (this.questionList[i].tag.length == 4) this.questionList[i].tag.splice(0,2)
                if (this.questionList[i].tag.length == 6) this.questionList[i].tag.splice(0,3)
              }

            }
          })
        }
      })
    },
    toQuestionDetail(questionId){
      let url = this.$router.resolve({
        path: '/question/'+questionId
      });
      window.open(url.href, '_blank')
      // this.$router.push('/question/'+questionId)
    },

    //提问
    AddQuestion(){
      // 判断是否登录
      // 无登录
      if (this.userId === ''){
        this.$message.error("请先登录系统！")
        return;
      }
      this.$router.push('/wenda/add')
    },

    searchLight(list){
      list.map((item, index) => {
        if (this.questionQuery.title && this.questionQuery.title.length > 0){
          // 匹配关键字正则
          let replaceReg = new RegExp(this.questionQuery.title, 'gi')
          // 高亮替换v-html值
          let replaceString = '<span class="question-search-text">$&</span>'
          // 开始替换
          list[index].title = item.title.replace(replaceReg, replaceString)
        }
      })
      this.questionList = ''
      this.questionList = list
    },
  },
  computed: {
    ...mapGetters({
      'userId': 'id',
    })
  },
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  .question
    padding: 20px 0 50px;
    .question-header
      .question-search
        position: relative;
        padding-right: 75px;
        background-color: #fff;
        border-bottom: 1px solid rgba(7,17,27,0.1);
        & > img
          width: 300px;
          height: 60px;
        .search-box
          float: right;
          position: relative;
          margin-top: 16px;
          width: 480px;
          height: 36px;
          line-height: 36px;
          border-radius: 8px;
          background-color: $border-three-color;
          & > input
            padding: 0 60px 0 10px;
            width: 100%;
            height: 36px;
            outline: none;
            background: none;
            box-sizing: border-box;
            color: $font-four-color;
            font-size: 14px;
          .reset-btn
            display: inline-block;
            position: absolute;
            top: 0;
            right: 20px;
            margin-top 2px
            font-size: 14px;
            cursor: pointer;
            margin-right 30px
          .iconfont
            display: inline-block;
            position: absolute;
            top: 0;
            right: 20px;
            font-size: 20px;
            font-weight: 700;
            color: $font-four-color;
            cursor: pointer;
        .search-btn
          position: absolute;
          right: 0;
          top: 16px;
          padding: 7px 16px;
          background-color: #1fad4e;
          border-radius: 18px;
          color: #fff;
          font-size: 14px;
          line-height: 24px;
          cursor: pointer;
          &:hover
            background-color: #17823b;
      .question-nav
        position: relative;
        padding-top: 8px;
        padding-left: 80px;
        border-bottom: 1px solid rgba(7,17,27,0.1);
        dt, dd
          font-size: 14px;
          line-height: 24px;
        dt
          position: absolute;
          top: 8px;
          left: 0;
        dd
          display: inline-block;
          vertical-align: middle;
          padding-right: 20px;
          margin-bottom: 8px;
          cursor: pointer;
          &:hover, &.active
            color: $theme-green-color;
    .question-content-container
      display: flex;
      align-items: flex-start;
      margin-top: 30px;
      .left
        flex: 1;
        .question-list
          padding: 28px 32px;
          background-color: #fff;
          border-radius: 12px;
          box-shadow: 0 4px 8px 2px rgba(7,17,27,.1)
          .question-item
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(7,17,27,0.1);
            &:last-child
              border-bottom: none;
            .finish-green
              flex: 0 0 40px;
              width: 40px;
              padding: 8px 0;
              margin-right: 15px;
              background-color: rgba(31,173,78,.1);
              color: #1fad4e;
              & > span
                display: block;
                text-align: center;
                line-height: 18px;
                font-size: 16px;
                font-weight: 700;
                margin-top 3px;
                &:last-child
                  font-weight: 400;
                  font-size: 14px;
            .finish-white
              flex: 0 0 40px;
              width: 40px;
              padding: 8px 0;
              margin-right: 15px;
              color: #1fad4e;
              & > span
                display: block;
                text-align: center;
                line-height: 18px;
                font-size: 16px;
                font-weight: 700;
                margin-top 3px;
                &:last-child
                  font-weight: 400;
                  font-size: 14px;
            .content-box
              flex: 1;
              .title
                margin-bottom: 4px;
                font-size: 16px;
                color: $font-first-color;
                font-weight: 700;
                line-height: 24px;
                cursor: pointer;
                &:hover
                  color: #1fad4e;
              .tag
                font-size: 12px;
                color: $font-four-color;
                & > img
                  display: inline-block;
                  vertical-align: middle;
                  margin-top: -2px;
                  width: 16px;
                  height: 16px;
                  border-radius: 50%;
                & > span
                  display: inline-block;
                  vertical-align: middle;
                  &.name
                    padding: 0 10px 0 0px;
                  &.view-box
                    padding-left: 10px;
                    & > i, & > span
                      display: inline-block;
                      vertical-align: middle;
        .list-empty
          padding: 10px 0;
          text-align: center;
          font-size: 14px;
          color: #1fad4e;
      .right
        margin-left: 30px;
        flex: 0 0 280px;
        width: 280px;
</style>
